<template>
	<z-nav-bar title="课程包"></z-nav-bar>
	<view v-if="packageData.data && packageData.data.length">
		<view v-for="(course, index) in packageData.data" :key="course.id" class="course-package">
			<view class="package-edit" @click="packageEditRef.open(course, index)">编辑</view>
			<view class="flex_fs">
				<image
					:src="`${setting.oss_pub_domain}/app-img/icon/icon-course-${course.type == 2 ? 'time' : 'main'}.png`"
					class="icon-size uni-mr-16"
				></image>
				<view>
					<view class="text-w u-line-1" style="width: 420rpx">{{ course.names }}</view>
					<view class="z-font-24 uni-color-grey uni-mt-4 flex_fsc">
						<view>课包类型: {{ course.type == 1 ? '课时包' : course.type == 2 ? '限时包' : '' }}</view>
						<view v-if="course.type === 2">
							<span class="uni-mx-20">|</span>
							有效期: {{ course.validityDate }}
						</view>
					</view>
					<view v-if="course.type == 2" class="uni-mt-12">已上课时：{{ course.residueNumber || 0 }}</view>
				</view>
			</view>
			<view v-if="course.type == 1" class="package flex_sac">
				<view class="text-c">
					<view class="z-font-36 text-w" style="line-height: 50rpx">{{ course.number || 0 }}</view>
					<view class="tips">总课时</view>
				</view>
				<view class="text-c">
					<view class="z-font-36 text-w" style="line-height: 50rpx">{{ course.residueNumber || 0 }}</view>
					<view class="tips">已上课时</view>
				</view>
				<view class="text-c">
					<view class="z-font-36 text-w" style="line-height: 50rpx">{{ (course.number || 0) - (course.residueNumber || 0) }}</view>
					<view class="tips" style="color: #008965">剩余课时</view>
				</view>
			</view>
		</view>
	</view>
	<z-no-data v-else></z-no-data>
	<bottom-box :buts="buts" @change="packageEditRef.open({}, -1)"></bottom-box>
	<package-edit ref="packageEditRef" @done="reloadPackage"></package-edit>
</template>

<script setup>
import { onLoad, onPullDownRefresh, onReachBottom } from '@dcloudio/uni-app';
import { ref, reactive, getCurrentInstance, onMounted } from 'vue';
import { getPackageList } from '@/api/player.js';
import PackageEdit from '../course/package';

const { proxy: that } = getCurrentInstance();
const playerInfo = uni.getStorageSync('player-info');

const packageData = reactive({
	data: [],
	total: 0,
	pageSize: 10,
	pageNum: 1,
	query: {}
});
function fetchData() {
	const params = { stuId: playerInfo.id, pageSize: packageData.pageSize, pageNum: packageData.pageNum, ...packageData.query };
	getPackageList(params).then(res => {
		res.rows.forEach(item => {
			if (item.type == 2) item.validityDate = item.validityDate.split('T')[0]
		})
		if (packageData.pageNum === 1) packageData.data = res.rows;
		else packageData.data.push(...res.rows);
		packageData.total = res.total;
		uni.stopPullDownRefresh();
	});
}
fetchData()

onPullDownRefresh(() => {
	packageData.pageNum = 1;
	packageData.query = {};
	fetchData();
});

onReachBottom(() => {
	if (packageData.data.length >= packageData.total) return;
	packageData.pageNum += 1;
	fetchData();
});

function search(name) {
	packageData.pageNum = 1;
	packageData.query.name = name;
	fetchData();
}

const buts = [
	{
		label: '新建课包',
		bgColor: '#008965'
	}
];

const packageEditRef = ref('')
/**
 * 编辑或新建后重新请求数据
 */
function reloadPackage(e) {
	if (e.index == -1) uni.startPullDownRefresh()
	else packageData.data[e.index] = e.info
}
</script>

<style lang="scss">
.course-package {
	background: #F7F8FA;
	box-sizing: border-box;
	padding: 24rpx;
	border-radius: 16rpx;
	position: relative;
	margin: 32rpx 32rpx 0;
	.package-edit {
		width: 112rpx;
		height: 48rpx;
		background: #EBEDF0;
		border-radius: 0rpx 20rpx 0rpx 32rpx;
		color: $uni-text-color-main;
		text-align: center;
		line-height: 48rpx;
		position: absolute;
		top: 0;
		right: 0;
	}
	.package {
		width: 100%;
		height: 122rpx;
		background-color: #ffffff;
		margin-top: 20rpx;
		border-radius: 16rpx;
		.tips {
			font-size: 24rpx;
			color: #525866;
			line-height: 34rpx;
		}
	}
}
</style>
